<template>
  <div @click="isOpenSelect = !isOpenSelect" class="flavor-select">
    <div class="name" :class="{ active: isOpenSelect, noSelect: flavorName === '' }">{{ flavorName || '请选择口味' }}</div>
    <div v-show="isOpenSelect" class="select-list">
        <div @click="clickFlavor(item)" v-for="item in residueDishFlavor" :key="item.value" class="select-item">
            <span class="name">{{ item.label }}</span>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FlavorSelect',
  data () {
    return {
      isOpenSelect: false
    }
  },
  methods: {
    clickFlavor (data) {
      const index = this.flavorOptions.findIndex(item => item.label === data.label)
      this.$emit('change', index)
    }
  },
  props: {
    residueDishFlavor: {
      type: Array,
      default () {
        return []
      }
    },
    flavorName: {
      type: String,
      default: ''
    },
    flavorOptions: {
      type: Array,
      default () {
        return []
      }
    }
  }
}
</script>

<style lang="less" scoped>
.flavor-select {
    height: 100%;
    position: relative;
    width: 150px;

    > .name {
        display: flex;
        align-items: center;
        height: 100%;
        border: 1px solid #d8dde3;
        background-color: #fff;
        color: #333;
        padding: 0 10px;
        border-radius: 3px;

        &.noSelect {
            color: #c0c4cc;
        }

        &:hover {
            border-color:#bac0cd;
        }

        &.active {
            border-color: #ffc200;
        }
    }

    .select-list {
        position: absolute;
        top: 50px;
        display: flex;
        flex-direction: column;
        width: 100%;
        background-color: #fff;
        border-radius: 3px;
        border: 1px solid #dfe2e8;
        z-index: 99;
        text-align: center;

        .select-item {
            width: 100%;
            border-bottom: 1px solid #edf0f3;
            cursor: pointer;
            padding: 10px 0;

            &:hover {
                background-color: #fffbf0;
            }

            &:last-of-type {
                border-bottom: 0;
            }
        }
    }
}
</style>
